web 無遠弗屆可以接觸到世界各地的人們，因此網站的內容必須要準備多種語言供應不同的 user 讓大家知道我們正在解決什麼問題，所以最後一天就來看看 Vue 怎麼套用多語系(i18n)吧。

最後一天目標：

1. 建立多語系國際化內容 i18n
2. 持續學習 Vue 相關資源

網站系統國際化 (i18n)

internationalization

在 i ~~ n 中間有18個字母，因此常以 i18n 代替說明。

我們使用 vue-i18n 套件 | vue-i18n documentation

install

npm install vue-i18n --save-dev

準備好翻譯語言包

所有的語言包會放在 i18n folder 下，新增兩隻 JSON ( en.json, tw.json )

└─src
   └─i18n
      ├─en.json
      └─tw.json

利用 JSON 儲存兩種語言的翻譯檔案。

// tw.json
{
  "Please_sign_in": "請登入。",
  "Email_address": "輸入電子郵件",
  "Password": "輸入密碼",
  "Show_password": "顯示密碼",
  "Sign_in": "登入"
}

// en.json
{
  "Please_sign_in": "Please sign in",
  "Email_address": "Email address",
  "Password": "Password",
  "Show_password": "Show Password",
  "Sign_in": "Sign in"
}

main.js 設定：

import VueI18n from 'vue-i18n';

// init
Vue.use( VueRouter );
Vue.use( VueI18n );

// i18n
import en from './i18n/en.json'; // 存放英文翻譯
import tw from './i18n/tw.json'; // 存放繁體中文翻譯
const locales = {
  en: en,
  tw: tw,
};
// set lang from state
// lang 對應的是 locales 的 key 目前有：en, tw
Vue.config.lang = store.state.lang; // 從 state 獲取預設語言設定。

// set locales
Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang]);
});

結合 vuex

語系 state 也是設計在 root 上，因為整個系統的語系是統一的設定。

store/root.js 只列出修改的

import * as types from './mutations_types.js';
// 為了設定語系引入 Vue
import Vue from 'vue';

export const state = {
  lang: 'en',
}

export const actions = {
  setLanguage ({ commit }, lang) {
    commit(types.LANGUAGE, lang);
  },
}

export const mutations = {
  [types.LANGUAGE] (state, setlang) {    
    state.lang = setlang;
    // 設定 Vue config 將會改變 i18n 使用的語言包而更改語系！
    Vue.config.lang = state.lang;
  },
}

使用

在 template 的使用上要改成：$t( key字串 )

以 login 頁面範例。

<!-- 在 tag 內容，外面一樣使用 {{ }} -->
<h2>{{ $t("Please_sign_in") }}</h2>

<!-- 在 attribute 上使用 -->
:placeholder="$t('Email_address')"
<!-- 記得使用 v-bind: 不然不會更新 -->

改變語系

在 switch 按鈕使用 @change 發出 action: setLanguage

然後用比較偷懶的方法，bind true & false value 分別是 tw, en 傳給 action

直接帶到 mutation set lang

<template>
  <input 
    type="checkbox"
    v-model="lang"
    :true-value="'tw'"
    :false-value="'en'"
    @change="setLanguage( lang )"
    id="slideThree" />
  <label for="slideThree"></label>
</template>

<script>
export default {
  data () {
    return {
      lang: this.$store.state.lang, // get lang 預設值 `en`
    }
  },
}
</script>

以上

在 vue-i18n 與 vuex 搭配上，目前想到這個方法，

如果有更好的方式或流程在提出來討論囉。

持續學習 Vue

相關資源：

1. Vue 套件軍火庫 awesome-vue
   • 蒐集世界各地開發者實作項目。
   • 想要什麼功能？先來這裡找吧！
2. the vue point medium
   • 一些 Vue 近期的改動，未來計畫等.. 消息會在這邊發布。
3. 追蹤 Vue twitter
4. Vue.js 台灣 facebook
   • 台灣的開發者都在這了，快加入！
5. Vue 中文討論區
6. 掘金 | infoQ
   • 討論平台，有大量的 Vue 與其他技術討論。
7. Develop Web Apps with Vue.js - egghead
   • egghead 出品必屬佳作。
8. Weex - 使用 Vue 開發跨平台 Native APP
   • Vue.js 作者尤雨溪加盟 Weex 項目擔任技術顧問

其中 Weex 感覺是可以追蹤的項目： Vue x 阿里巴巴 合作
React 有 React Native
Vue 有 Weex

一些好文章：

1. 我們為什麼選擇 Vue.js 而不是 React
   • 一些觀點可以參考，我們 不是 強調 React 不好！事實是 Vue 涵蓋了很多 React 的概念。
2. Vuex 2.0 原始碼分析
3. 透過 Vue-CLI 建置專案時，自動切換 devtools 的 debug 環境 - Kuro's Blog
   • deploy 要注意的事。

有看到再補..

完賽心得：

在 2016 年最後一天，完成了三十天連續發文的鐵人賽，

是今年參加最有意義的活動之一。

參賽前還在猶豫沒有把握可以完賽，

感謝 卡斯伯 推坑。

從第一週每天趕在 11: 59 以前發出文章，

到中期每天都在思考我今天有發文了嗎？

就這樣.. 跌跌撞撞的走完三十天 :D

感謝 ithome ithelp 舉辦 ironman 活動。

感謝 HackMD 跨平台 markdown 服務，用瀏覽器就可以寫作，所有文章都是在這邊撰寫的。

感謝公司主管與同事，默默支持。

最後祝大家新年快樂，身體健康，專案順心。

Just Do It !

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。